【DAY 12】元件介紹:Dialog-2-選擇對話框

2023 iThome 鐵人賽

DAY 12

Mobile Development

Android Studio開發系列第 12 篇

15th鐵人賽

jeff98115

團隊nutc_imac_function

2023-09-22 12:42:49

1095 瀏覽

分享至

書接上回，我們今天來介紹其他不同的Dialog，這篇主要介紹3種，分別是:

列表對話框
單選對話框
複選對話框

這些都是生活中常見的對話框，能讓使用者作出選擇並將資訊回傳，實際的效果分別長這樣:

列表對話框
單選對話框
複選對話框

下面我們就來看看具體是如何實作。

列表對話框
MainActivity:

public class MainActivity extends AppCompatActivity {

    //定義變數btn1
    Button btn1;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //綁定元件和變數
        btn1=findViewById(R.id.button);

        //設置按鈕監聽，當按下btn1時執行
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //當按下按鈕時新增對話框，並設置標題和內文
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                String[] items = {"物品1", "物品2", "物品3", "物品4"};
                dialog.setTitle("列表對話框");

                //item的點擊事件
                dialog.setItems(items, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, "你點擊了:" + items[i], Toast.LENGTH_SHORT).show();
                    }
                });

                //顯示出Dialog
                dialog.show();
            }
        });
    }
}

單選對話框
MainActivity:

public class MainActivity extends AppCompatActivity {

    //定義變數btn2
    Button btn2;
    int choice;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //綁定元件和變數
        btn2=findViewById(R.id.button2);

        //設置按鈕監聽，當按下btn2時執行
        btn2.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {

                //當按下按鈕時新增對話框，並設置標題和內文
                AlertDialog.Builder dialog= new AlertDialog.Builder(MainActivity.this);
                choice = 0; //預設選擇物品a
                String[] items = {"物品a", "物品b", "物品c", "物品d"};
                dialog.setTitle("單選對話框");
                //列表選擇
                dialog.setSingleChoiceItems(items, choice, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        choice = i;
                    }
                });

                //按下確定時，將選擇的物品訊息彈出
                dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, "你選了" + items[choice], Toast.LENGTH_SHORT).show();
                    }
                });

                //顯示出Dialog
                dialog.show();
            }
        });
    }
}

其中的choice變數是設定預設會選擇哪個物品。

複選對話框
MainActivity:

public class MainActivity extends AppCompatActivity {

    //定義變數btn3
    Button btn3;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //綁定元件和變數
        btn3=findViewById(R.id.button3);

        btn3.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {

                //當按下按鈕時新增對話框，並設置標題和內文
                AlertDialog.Builder dialog= new AlertDialog.Builder(MainActivity.this);
                String[] items = {"物品1", "物品2", "物品3", "物品4"};
                //預設選中物品，false表示未選中，true則有
                boolean choiceSets[] = {true, true, true, true};
                dialog.setTitle("複選對話框");

                dialog.setMultiChoiceItems(items, choiceSets,
                        new DialogInterface.OnMultiChoiceClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i, boolean b) {
                                choiceSets[i] = b;
                            }
                        }
                );

                //將所有選取的物品訊息彈出
                dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        String result = "";
                        for (int k = 0; k < items.length; k++) {
                            if (choiceSets[k]) {
                                result += items[k] + ",";
                            }
                        }
                        Toast.makeText(MainActivity.this, "你選了" + result, Toast.LENGTH_SHORT).show();
                    }
                });

                //顯示出Dialog
                dialog.show();
            }
        });
    }
}

利用一個容器存取各物品的布林值，如果有選中則為true，反之為false。

最後把這3種對話框總結起來:
MainActivity:

public class MainActivity extends AppCompatActivity {

    //定義變數btn1,btn2,btn3
    Button btn1;
    Button btn2;
    Button btn3;
    int choice;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //綁定元件和變數
        btn1=findViewById(R.id.button);
        btn2=findViewById(R.id.button2);
        btn3=findViewById(R.id.button3);

        //設置按鈕監聽，當按下btn1時執行
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //當按下按鈕時新增對話框，並設置標題和內文
                AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
                String[] items = {"物品1", "物品2", "物品3", "物品4"};
                dialog.setTitle("列表對話框");

                //item的點擊事件
                dialog.setItems(items, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, "你點擊了:" + items[i], Toast.LENGTH_SHORT).show();
                    }
                });

                //顯示出Dialog
                dialog.show();
            }
        });

        //設置按鈕監聽，當按下btn2時執行
        btn2.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {

                //當按下按鈕時新增對話框，並設置標題和內文
                AlertDialog.Builder dialog= new AlertDialog.Builder(MainActivity.this);
                choice = 0; //預設選擇物品a
                String[] items = {"物品a", "物品b", "物品c", "物品d"};
                dialog.setTitle("單選對話框");
                //列表選擇
                dialog.setSingleChoiceItems(items, choice, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        choice = i;
                    }
                });

                //按下確定時，將選擇的物品訊息彈出
                dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        Toast.makeText(MainActivity.this, "你選了" + items[choice], Toast.LENGTH_SHORT).show();
                    }
                });

                //顯示出Dialog
                dialog.show();
            }
        });


        btn3.setOnClickListener(new View.OnClickListener() {
            public void onClick(View view) {

                //當按下按鈕時新增對話框，並設置標題和內文
                AlertDialog.Builder dialog= new AlertDialog.Builder(MainActivity.this);
                String[] items = {"物品1", "物品2", "物品3", "物品4"};
                //預設選中物品，false表示未選中，true則有
                boolean choiceSets[] = {true, true, true, true};
                dialog.setTitle("複選對話框");

                dialog.setMultiChoiceItems(items, choiceSets,
                        new DialogInterface.OnMultiChoiceClickListener() {
                            @Override
                            public void onClick(DialogInterface dialogInterface, int i, boolean b) {
                                choiceSets[i] = b;
                            }
                        }
                );

                //將所有選取的物品訊息彈出
                dialog.setPositiveButton("確定", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialogInterface, int i) {
                        String result = "";
                        for (int k = 0; k < items.length; k++) {
                            if (choiceSets[k]) {
                                result += items[k] + ",";
                            }
                        }
                        Toast.makeText(MainActivity.this, "你選了" + result, Toast.LENGTH_SHORT).show();
                    }
                });

                //顯示出Dialog
                dialog.show();
            }
        });
    }
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="列表對話框"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.052"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.499" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="單選對話框"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.499" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="複選對話框"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.947"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

今天的介紹就到這裡~~